<template>
    <div class="goodscontainer">
        <!-- 商品大图 -->
        <div class="mui-card">
            <!-- <div class="mui-card-header mui-card-media" style="height:100vw;background-image:url(./static/images/goodlargh.jpg)"></div> -->
            <swiper :list="list" class="goodswipe"></swiper>
        </div>
        <!-- 热销详情 -->
        <div class="mui-card priceSpec">
            <div class="moneyBox">
                <span class="newmoney">¥<i>{{goods.newmoney}}</i>.00</span>
                <span class="oldmoney">
                    <span class="old">¥{{goods.oldmoney}}.00</span>
                    <span class="buy"><span class="iconfont icon-timer"></span>闪购</span>
                </span>
            </div>
            <div class="time">
                <span class="timeTxt">距闪购结束还剩</span>
                <span class="timeNum"><i>{{goods.time}}</i>天</span>
            </div>
        </div>
        <!-- 商品简介 -->
        <div class="mui-card-content-inner intro mui-card">
            <div class="goodstitle"><i>{{goods.source}}</i>{{goods.title}}</div>
            <div class="like">
                <span class="iconfont icon-heart" @click="red" :style="{'color': color}"></span>
                <span>关注</span>
            </div>
        </div>
        <div class="mui-card">
            <mt-button size="large" plain type="primary" id="details" @click="goDesc(goods.id)">图文介绍</mt-button>
            <mt-button size="large" plain type="danger" id="comment" @click="goComment">商品评论</mt-button>
        </div>
        <!--底部购物栏 -->
        <nav>
            <span class="buynow" @click="addTocar">
                <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
                    <span class="ball" v-show="flag"></span>
                </transition>
            加入购物车</span>
            <span class="joincar" @click="sheetVisible=true">立即购买</span>
        </nav>
        <mt-actionsheet
            :actions="actions"
            v-model="sheetVisible">
        </mt-actionsheet>
    </div>
</template>

<script>
import swiper from '../subcomponents/swipe.vue'
import { log } from 'util';
export default {
    data() {
        return {
            goods: {
                id: 1,
                newmoney: 2700,
                oldmoney: 2999,
                time: 2,
                source: '自营',
                title: '荣耀V20 胡歌同款 麒麟980芯片 魅眼全视屏 4800万深感相机 6GB+128GB 幻影蓝 移动联通电信4G全面屏手机',
            },
            color: '#333',
            actions: [{name: '全网通（6GB 128GB）'},
            {name: '全网通（8GB 128GB）'},
            {name: '全网通（8GB 256GB）'}],
            sheetVisible: false,
            list: [{
                id: 1,
                img: './static/images/goodlargh.jpg'
            },{
                id: 2,
                img: './static/images/goodlargh2.jpg'
            },{
                id: 3,
                img: './static/images/goodlargh3.jpg'
            },{
                id: 4,
                img: './static/images/goodlargh4.jpg'
            },{
                id: 5,
                img: './static/images/goodlargh5.jpg'
            },{
                id: 6,
                img: './static/images/goodlargh6.jpg'
            },{
                id: 7,
                img: './static/images/goodlargh7.jpg'
            },{
                id: 8,
                img: './static/images/goodlargh8.jpg'
            },],
            flag: false,
        }
    },
    methods: {
        red() {
            this.color = '#ff4165';
        },
        goDesc(id) {
            this.$router.push({name: "goodsdesc", params: {id}})
        },
        goComment(id) {
            this.$router.push({name: "goodscomment", params: {id}})
        },
        beforeEnter(el) {
            el.style.transform = 'translate(0, 0)';
        },
        enter(el, done) {
            el.offsetWidth;
            el.style.transform = 'translate(170px, 60px)';
            el.style.transition = 'all 1s cubic-bezier(.4, -0.3, 1, .68)';
            done();
        },
        afterEnter(el) {
            this.flag = !this.flag;
        },
        addTocar() {
            this.flag = !this.flag;
            let goodsInfo = {
                id: 1,
                name: this.goods.title,
                count: 1,
                price: this.goods.newmoney,
                selected: true
            }
            this.$store.commit("addTocar", goodsInfo)
        }
    },
    components: {
        swiper
    },
    watch: {
        count: {
            data(val, newval) {
                console.log(val)
                console.log(newval)
            }
        }
    }
}
</script>

<style scoped>
    /* 中心 */
    .goodscontainer {
        padding-bottom: 50px;
    }
    /* 热销详情 */
    .priceSpec {
        display: flex;
        height: 50px;
    }
    .moneyBox {
        display: flex;
        flex: 2;
        align-items: center;
        background: linear-gradient(90deg,#f65ba5,#ff4165);
    }
    .newmoney {
        font-size: 12px;
        margin: 0 10px;
        line-height: 50px;
        color: #fff;
        font-weight: 700;
    }
    .newmoney i {
        font-size: 26px;
        font-style: normal;
    }
    .oldmoney {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
    }
    .old {
        opacity: .7;
        text-decoration:line-through; 
    }
    .buy {
        font-size: 12px;
        width: 44px;
        height: 17px;
        line-height: 14px;
        border: 1px solid #fff;
    }
    .buy span {
        background: #fff;
        color: #ff4165;
    }
    .time {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        background: #f7f7f7;
    }
    .time span {
        font-size: 10px;
    }
    .timeTxt {
        color: #333;
    }
    .timeNum {
        color: #e93b3d;
    }
    .timeNum i{
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #ccc;
        padding: 1px;
        margin-right: 5px;
        font-weight: 700;
    }
    /* 底部购物栏 */
    nav {
        position: fixed;
        display: flex;
        z-index: 99;
        left: 0;
        right: 0;
        bottom: 55px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 14px;
    }
    .buynow {
        flex: 1;
        background: #ff9600;
    }
    .joincar {
        flex: 1;
        background: #e4393c;
    }
    .intro {
        display: flex;
    }
    .mui-card-content-inner {
        padding: 10px;
    }
    .ball {
        position: absolute;
        z-index: 999;
        width: 15px;
        height: 15px;
        background: #f44336;
        border-radius: 50%;
    }
    /* 产品简介 */
    .goodstitle {
        flex: 8;
        font-size: 16px;
        color: #333;
        padding-right: 10px;
    }
    .goodstitle i {
        font-style: normal;
        font-size: 12px;
        background: #e93b3d;
        padding: 2px;
        border-radius: 3px;
        color: #fff;
        margin-right: 5px;
    }
    .like {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-size: 10px;
        text-align: right;
    }
    .like span {
        border-left: 1px solid #ddd;
    }
    .icon-heart {
        font-size: 20px;
    }
    #details {
        margin-bottom: 10px;
    }
</style>

<style>
    /* 轮播图样式 */
    .mint-actionsheet-listitem {
        color: #e4393c;
    }
    .goodswipe .mint-swipe {
        height: 100vw;
    }
    .goodswipe .mint-swipe-item {
        background-size: 100%!important; 
    }
</style>
